<template>
	<view class="box-tell" :class="{ hasBorder: hasBorder }">
		<view class="left">
			<uni-icons :type="type" class="deep-size" color="#ff557f"></uni-icons>
		</view>
		<view class="center">
			<text>{{ text }}</text>
		</view>
		<view class="right">
			<text class="right-num">{{ num }}</text>
			<uni-icons type="right" class="deep-size deep-color"></uni-icons>
		</view>
	</view>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps(['hasBorder', 'text', 'num', 'type'])
</script>

<style scoped lang="scss">
.hasBorder {
	// background-color: rgba(150, 150, 150, 0.2);
	border: 1rpx solid #eee;
}

.box-tell {
	font-size: 29rpx;
	height: 60rpx;
	padding: 15rpx;
	@extend .f-c-c-n;

	.left,
	.center,
	.right {
		@extend .f-c-c-n;
	}

	.left {
		width: 90rpx;
		justify-content: center;

		text {
			color: #ff557f;
		}
	}

	.center {
		flex: 1;
		justify-content: start;
	}

	.right {
		justify-content: end;
		width: 70rpx;

		.right-num {
			color: #ff557f;
		}
	}
}
</style>
